<template>
	<div class="mobile">
		<div class="d-flex jc-center our-header">
			<dv-decoration-10 style="width:100%;height:.0625rem;" />
			<div class="d-flex jc-center">
				<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
				<div class="title">
					<span class="title-text">大数据可视化平台</span>
					<dv-decoration-6 class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']" style="width:3.125rem;height:.1rem;" />
				</div>
				<dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
			</div>
			<!-- <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" /> -->
		</div>

		<div class="d-flex jc-between px-2">
			<div class="d-flex" style="width: 40%">
				<div class="react-right ml-4" style="width: 6.25rem; text-align: left;background-color: transparent;">
					<span class="react-before"></span>
					<span class="text"></span>
				</div>
				<div class="react-right ml-3" style="background-color: #0f1325;">
					<span class="text colorBlue"></span>
				</div>
			</div>
			<div style="width: 40%" class="d-flex">
				<div class="react-left mr-4" style="width: 6.25rem; background-color: transparent; text-align: right;">
					<span class="react-after"></span>
					<span class="text">{{date}}</span>
				</div>
			</div>
		</div>

		<div class="content-box">
			<div>
				<center />
			</div>
			<div>
				<dv-border-box-13>
					<centerRight1 />
				</dv-border-box-13>
			</div>
			<dv-border-box-13>
				<bottomLeft />
			</dv-border-box-13>
			<div>
				<dv-border-box-12>
					<centerLeft1 />
				</dv-border-box-12>
			</div>
		</div>

		<div class="bototm-box">
			<dv-border-box-12>
				<bottomRight />
			</dv-border-box-12>
		</div>
	</div>

</template>

<script>
	import centerLeft1 from "./centerLeft1";
	// import centerLeft2 from "./centerLeft2";
	import centerRight1 from "./centerRight1";
	// import centerRight2 from "./centerRight2";
	import center from "./center";
	import bottomLeft from "./bottomLeft";
	import bottomRight from "./bottomRight";
	export default {
		data() {
			return {
				loading: true,
				date: new Date()
			};
		},
		components: {
			centerLeft1,
			// centerLeft2,
			centerRight1,
			// centerRight2,
			center,
			bottomLeft,
			bottomRight
		},
		mounted() {
			this.cancelLoading();
			let _this = this;
			this.timer = setInterval(function() {
				_this.date = new Date().toLocaleString();
			});


		},
		methods: {
			cancelLoading() {
				setTimeout(() => {
					this.loading = false;
				}, 2000);
			}
		},
		beforeDestroy: function() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
	};
</script>

<style lang="scss">
	.mobile {
		color: #d3d6dd;
		background-color: #000000;
		width: 100%;
		overflow-x: hidden;

		.decoration2 {
			display: none;
		}
		.bg {
			padding: 0.2rem 0.2rem 0 0.2rem;
			background-image: url("../assets/pageBg.png");
			background-size: cover;
			background-position: center center;
		}

		.dv-scroll-board {
			width: 100% !important;
		}

		#bottomLeftChart {
			width: 100% !important;
		}

		#bottomRightChart {
			width: 100% !important;
		}

		.jc-center {
			.title {
				.title-text {
					margin-bottom: 5px;
				}

				text-align: center;
				margin-top: 11px;
				display: flex;
				flex-direction: column;
			}
		}

		.our-header {
			display: flex;
			flex-direction: column;
		}

		.dv-decoration-8 {
			margin-top: 10px;
		}

		.up {
			.item {
				width: 49% !important;
				height: 1.3rem !important;
			}
		}

		.content-box>div {
			margin-top: 10px;
		}

		.bototm-box>div {
			margin-top: 10px;
		}
	}
</style>
